{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}

    <h1>就业信息表</h1>
{#        <p>Use <code>pagination</code>, <code>sidePagination</code>, <code>pageNumber</code>, <code>pageSize</code>, <code>pageList</code> options to set the pagination options.</p>#}

            <div>薪水:
                <input name="username">
            </div>
            <table id="table"
               data-toggle="table"
               data-toolbar="#toolbar_jobinfo"
               data-query-parms="queryParams"
               data-pagination="true"
               data-side-pagination="server"
               data-height="700"
               data-search="true"
               data-page-list="[10, 25, ALL]"
                data-url="{% url 'apis:job_info' %}"
               data-page-size="2"
                data-pagination="true"
                data-show-refresh="true"
                data-show-toggle="true"
               data-show-export="true"
               data-export-types="['excel']"
               data-export-options='{
                "fileName": "备件操作日志",
                "worksheetName": "备件操作日志",
                }'
{#               data-url="{% static 'data/data1.json' %}">#}
{#                data-url="http://issues.wenzhixin.net.cn/bootstrap-table/json/data1.json">#}
               data-url="{% url 'apis:job_info' %}">
            <thead>
            <tr>
                <th data-field="student__detail__real_name">姓名</th>
                <th data-field="company">公司</th>
                <th data-field="salary">薪水</th>
                <th data-field="city">城市</th>
                <th data-field="position">岗位</th>
                <th data-field="job_photo">图片</th>
                <th data-field="oper"
                    data-formatter="operateFormatter"
                    data-events="operateEvents">操作</th>
            </tr>
            </thead>
        </table>

{% endblock %}
{% block loadjs %}


    <script src="{% static 'bootstrap-table/dist/bootstrap-table.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'bootstrap-table/dist/extensions/export/bootstrap-table-export.js' %}" type="text/javascript"></script>
    <script src="{% static 'G:/scm/static/tableExport.js' %}" type="text/javascript"></script>

    <script>
    $(function(){
            $('.fixed-table-toolbar .search').removeClass('search').addClass('search2')
     });
    $table = $('#table');
        function  queryParams(tableParams) {
            var params = {};
            params['pagesize'] = tableParams.limit;
            params['offset'] = tableParams.offset;
            params['page'] = $table.bootstrapTable('getOptions').pageNumber;
            $('#toolbar_jobinfo').find('input[name]').each(
                function () {
                    params[$(this).attr('name')] = $(this).val()
                }
            );
            return params
        }
{#    function operateFormatter(value, row, index) {#}
{##}
{#        return '<a href="http://www.baidu.com">link</a>'#}
{#    }#}
    window.operateEvents = {
        'click .like': function (e, value, row) {
            alert('Like' +JSON.stringify(row));
        },
        'click .remove': function (e, value, row) {
            names = [row['student__detail__real_name'],];
            alert(names);
            $table.bootstrapTable('remove',{field:'student__detail__real_name', values:names});
        },
     };
    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Like">',
            '<i class="glyphicon glyphicon-heart"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }



    </script>
{% endblock %}

{% block loadcss %}
<style>
        .fixed-table-toolbar .search2 {
            position: relative;
            margin-top: 10px;
            margin-bottom: 10px;
            line-height: 34px;
        }
</style>
    <link href="{% static 'bootstrap-table/dist/bootstrap-table.min.css' %}" rel="stylesheet">
{% endblock %}
